<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        body{
            width: 400px;
        }
        input, input:focus {
            width: 30px;
            border-width: 0 0 1px 0;
        }
        h2,p{
            text-align: center;
        }
        h2{
            color: pink;
        }
        p.author{
            text-align: right;
        }
        img{
            border-radius: 50%;
            width: 50%;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h2>Hello, glad to see you.</h2>
    <img src="https://avatars.githubusercontent.com/u/9280581?s=400&u=e5e8d3ef837c0f65a4788a1ad13c6a4795b985c8&v=4" />
    <p>
        从<input id="lessonFrom" />集，到<input id="lessonTo" />集，共需要花费您<span id="app"></span>分钟
    </p>
    <p class="author">
        Author: <a id="author" href="https://gitee.com/ganyipeng/bilibili-times">GanYiPeng</a>
    </p>
    <script src="./js/popup.js"></script>
</body>

</html>